<template>
	<view class="main-page">
		<u-navbar title="订单详情" :autoBack="true" placeholder></u-navbar>
		<view class="page-item" v-if="detail.car">
			<view class="title">
				<text class="text">车辆信息</text>
			</view>
			<view class="content car-content">
				<view class="image">
					<image mode="aspectFill" :src="detail.car.image"></image>
				</view>
				<view class="content">
					<view class="text-item name">
						{{detail.car.brand}} {{detail.car.name}} {{detail.car.color}}
					</view>
					<view class="text-item no">
						{{detail.car.car_no}}
					</view>
					<view class="text-item">
						{{detail.car.staets}} {{detail.car.car_type}} {{detail.car.power_type}} {{detail.car.car_license}}
					</view>
				</view>
			</view>
		</view>
		<view class="page-item" v-if="detail">
			<view class="title">
				<text class="text">租车人</text>
			</view>
			<view class="content">
				<view class="text-item">
					<text class="label">姓名</text>
					<text class="value">{{detail.tenant_name}}</text>
				</view>
				<view class="text-item">
					<text class="label">手机</text>
					<text class="value">{{detail.tenant_phone}}</text>
				</view>
				<view class="text-item">
					<text class="label">同乘人数</text>
					<text class="value">{{detail.person_num}}</text>
				</view>
				<view class="text-item">
					<text class="label">目的地</text>
					<text class="value">{{detail.destination}}</text>
				</view>
				<view class="text-item">
					<text class="label">身份证</text>
					<view class="value img">
						<u-album :urls="[fileUrl+detail.tenant_idcard,fileUrl+detail.tenant_idcard_back]" ></u-album>
					</view>
				</view>
			</view>
		</view>
		<view class="page-item">
			<view class="title">
				<text class="text">订单信息</text>
				<view class="">
					<u--text type="info" text="已完成" v-if="detail.order_status == 2" size="12"></u--text>
					<u--text type="success" text="进行中" v-else  size="12"></u--text>
				</view>
			</view>
			<view class="content">
				<view class="text-item">
					<text class="label">来源</text>
					<text class="value">{{Enums.OrderFormType[detail.form_type]}}</text>
				</view>
				<view class="text-item">
					<text class="label">取车地点</text>
					<text class="value">{{detail.start_address}} {{detail.start_address_detail}}</text>
				</view>
				<view class="text-item">
					<text class="label">租车时长</text>
					<text class="value">{{detail.daylen}}</text>
				</view>
				<view class="text-item">
					<text class="label">预计还车</text>
					<text class="value">{{detail.end_address}}</text>
				</view>
				<view class="text-item">
					<text class="label">单价</text>
					<text class="value">{{detail.price}}</text>
				</view>
				<view class="text-item">
					<text class="label">总价</text>
					<text class="value">{{detail.amount}}</text>
				</view>
				<view class="text-item" >
					<text class="label">保险</text>
					<text class="value">{{Enums.YesNo[detail.insure_status]}}</text>
				</view>
				<template v-if="detail.insure_status == 1">
					<view class="text-item">
						<text class="label">保险渠道</text>
						<text class="value">{{detail.amount}}</text>
					</view>
					<view class="text-item">
						<text class="label">保险类型</text>
						<text class="value">{{detail.insure_type}}</text>
					</view>
				</template>
			</view>
		</view>
		<view class="page-item">
			<view class="title">
				<text class="text">送车人</text>
			</view>
			<view class="content">
				<view class="text-item">
					<text class="label">门店</text>
					<text class="value">{{detail.startStore.store_name}}</text>
				</view>
				<view class="text-item">
					<text class="label">姓名</text>
					<text class="value">{{detail.startStaff.staff_name}}</text>
				</view>
				<view class="text-item">
					<text class="label">油量</text>
					<view class="value img">
						<u-album :urls="[fileUrl+detail.start_petrol]" v-if="detail.start_petrol"></u-album>
					</view>
				</view>
				<view class="text-item">
					<text class="label">里程</text>
					<text class="value">{{detail.start_mileage}}</text>
				</view>
				<view class="text-item">
					<text class="label">磕碰图片</text>
					<view class="value img">
						<u-album :urls="detail.start_images" ></u-album>
					</view>
				</view>
				<view class="text-item">
					<text class="label">备注</text>
					<view class="value">
						{{detail.remark}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="page-item" v-if="detail.order_status == 2">
			<view class="title">
				<text class="text">还车人</text>
			</view>
			<view class="content">
				<view class="text-item">
					<text class="label">员工姓名</text>
					<text class="value">{{detail.completeStaff.staff_name}}</text>
				</view>
				<view class="text-item">
					<text class="label">还车地点</text>
					<text class="value">{{detail.complete_address}}</text>
				</view>
				<view class="text-item">
					<text class="label">还车时间</text>
					<text class="value">{{detail.complete_date}}</text>
				</view>
				<view class="text-item">
					<text class="label">油量</text>
					<view class="value img">
						<u-album :urls="[fileUrl+detail.complete_petrol]" v-if="detail.complete_petrol"></u-album>
					</view>
				</view>
				<view class="text-item">
					<text class="label">里程</text>
					<text class="value">{{detail.complete_mileage}}</text>
				</view>
				<view class="text-item" >
					<text class="label">是否磕碰</text>
					<text class="value">{{Enums.YesNo[detail.complete_damage_status]}}</text>
				</view>
				<view class="text-item">
					<text class="label">磕碰图片</text>
					<view class="value img">
						<u-album :urls="detail.complete_damage_images" ></u-album>
					</view>
				</view>
				<view class="text-item">
					<text class="label">备注</text>
					<view class="value">
						{{detail.complete_remark}}
					</view>
				</view>
			</view>
		</view>
		<view class="btn-item">
			<u-button class="bg-linear-main" type="primary" shape="circle" text="确认还车" @tap="showModal = 'order_done'" v-if="detail.order_status == 1"></u-button>
		</view>
		<u-popup :show="showModal == 'order_done'" @close="showModal = ''">
			<view class="form">
				<u--form labelPosition="left" :model="doneFormData" :rules="rules" ref="uForm" labelWidth="auto" :labelStyle="{fontSize:'26rpx',fontWeight:600}">
					<u-form-item label="还车地点" prop="complete_address" borderBottom>
						<u--input v-model="doneFormData.complete_address" border="none" placeholder="请输入还车地点" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<u-form-item label="还车油量" prop="complete_petrol" borderBottom>
						<view class="upload-item">
							<u-upload
								:fileList="complete_petrol"
								@afterRead="(event) => {afterRead(event, 'complete_petrol')}"
								@delete="(event) => {deletePic(event, 'complete_petrol')}"
								name="file"
								:previewFullImage="true"
								:maxCount="1"
							></u-upload>
						</view>
					</u-form-item>
					<u-form-item label="还车里程" prop="complete_mileage" borderBottom>
						<u--input v-model="doneFormData.complete_mileage" border="none" placeholder="请输入还车里程" inputAlign="right" fontSize="13"></u--input>
					</u-form-item>
					<u-form-item label="磕碰图片" prop="complete_damage_images" borderBottom >
						<view class="upload-item">
							<u-upload
								:fileList="complete_damage_images"
								@afterRead="(event) => {afterRead(event, 'complete_damage_images')}"
								@delete="(event) => {deletePic(event, 'complete_damage_images')}"
								name="file"
								:previewFullImage="true"
								:maxCount="9"
							></u-upload>
						</view>
					</u-form-item>
					<u-form-item label="还车备注" prop="complete_remark" borderBottom>
						<u--textarea v-model="doneFormData.complete_remark" placeholder="请输入还车备注" ></u--textarea>
					</u-form-item>
					<view class="btn-item">
						<u-button class="bg-linear-main" type="primary" shape="circle" text="确认还车" @tap="subDoneForm"></u-button>
					</view>
				</u--form>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { carOrderDetail, carOrderDone } from '@/common/api.js'
	import { fileUrl } from '@/common/config.js';
	import upload from '@/common/upload.js'
	
	export default {
		data() {
			return {
				no: "",
				detail: {},
				fileUrl: fileUrl,
				showModal: '',
				doneFormData: {
					'complete_date': '',
					'complete_address': '',
					'complete_damage_status': '',
					'complete_damage_images': [],
					'complete_petrol': '',
					'complete_mileage': '',
					'complete_staff_id': '',
					'complete_remark': '',
				},
				rules: {
					'complete_address': {type: 'string',required: true,message: '请填写还车地点',trigger: ['blur', 'change']},
					'complete_petrol': {type: 'string',required: true,message: '请上传还车油量',trigger: ['blur', 'change']},
					'complete_mileage': {type: 'string',required: true,message: '请填写还车里程',trigger: ['blur', 'change']},
				},
				complete_damage_images: [],
				complete_petrol: []
			}
		},
		onLoad(option){
			this.no = option.no;
			this.getOrderDetail();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			getOrderDetail(){
				carOrderDetail({no: this.no}).then(res => {
					res.complete_damage_images = res.complete_damage_images.map(item => {
						return fileUrl+item;
					})
					this.detail = res;
				})
			},
			async afterRead(event, field) {
				const file = event.file
				this[field].splice(event.index, 1, {
					...file,
					status: 'uploading',
					message: '上传中'
				})
				const result = await upload({filePath: file.url})
				switch(field){
					case 'complete_damage_images':
						this.doneFormData[field].splice(event.index, 1, result.file.url);
					break;
					default :
						this.doneFormData[field] = result.file.url
				}
				this[field].splice(event.index, 1, {...file,status: 'success', message: '', url: result.file.url})
			},
			deletePic(event, field){
				switch(field){
					case 'complete_damage_images':
						this.formData.image = ""
						this.car_image.splice(event.index, 1)
					break;
					default :
						this.doneFormData[field] = ""
				}
			},
			subDoneForm(){
				this.$refs.uForm.validate().then(res => {
					uni.showLoading();
					const parms = {no: this.no, ...this.doneFormData};
					parms.complete_damage_status = parms.complete_damage_images.length > 0 ? 1 : 0;
					carOrderDone(parms).then(res => {
						uni.$u.toast('操作成功!');
						this.getOrderDetail();
						this.showModal = "";
						uni.hideLoading();
					}).catch(res => {
						uni.$u.toast('操作失败!');
						uni.hideLoading();
					})
				}).catch(errors => {
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-item {
		background-color: white;
		.title {
			padding: 20rpx 0; margin: 0 25rpx; font-size: 28rpx; font-weight: 600; border-bottom: 2rpx solid #eee; display: flex; justify-content: space-between;
			.text { flex: 1; }
		}
		.content {
			padding: 25rpx;
			.text-item {
				display: flex; justify-content: space-between;
				.label { 
					color: #555; font-weight: 600; font-size: 24rpx;
				}
				.value {
					color: #777; font-size: 24rpx;
				}
			}
			.text-item + .text-item {
				padding: 7rpx 0;
			}
		}
	}
	.page-item + .page-item {
		margin-top: 25rpx;
	}
	.car-content {
		display: flex; justify-content: flex-start; background-color: #fff; padding: 24rpx; position: relative;
		.image { 
			width: 250rpx; height: 150rpx;
			image { height: inherit; width: inherit; }
		}
		.content { 
			flex: 1; padding-left: 25rpx;
			.text-item {
				color: #777; font-size: 24rpx;
			}
			.text-item + .text-item {
				padding-top: 10rpx;
			}
			.name {
				font-size: 28rpx; font-weight: 600; color: #333;
			}
			.no {
				
			}
		}
	}
	.btn-item { padding: 40rpx; }
	.form { padding: 25rpx; }
</style>
